<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const associatedCityList = [
        {
          value: 1,
          label: '全国'
        },
        {
          value: 2,
          label: '京津冀'
        },
        {
          value: 3,
          label: '江浙沪'
        },
        {
          value: 4,
          label: '川渝'
        },
        {
          value: 5,
          label: '黑吉辽'
        }
      ]

    const list = ['1', '3', '4']
    function getAssociatedCityList(list) {
      // list会出现的情况: 1-全国，2-京津冀，3-江浙沪，4-川渝，5-黑吉辽
      // '2'(单)---京津冀
      // '5'(单)---黑吉辽
      // '1', '3', '4'(多)---全国,江浙沪,川渝 ->重点处理的💥

// 一、filter: 用于过滤数组中符合特定条件的元素,返回一个由满足条件的元素组成的[新数组]
// 二、findIndex: 返回数组中满足提供的测试函数的"第一个元素的索引", 如果没有找到满足条件的元素则返回-1
// findIndex 只返回当前第一个满足元素的索引; 但配合 filter 后, 执行一轮去除找到的, 再去匹配剩下的,
// 实现依次返回 "第一个满足元素的索引"....

      return associatedCityList
        .filter((item) => {
          return list.findIndex((item1) => item1 === String(item.value)) !== -1
        })
        .map((item) => item.label) // 将每项 label 取出, 组成label数组
        .join(',') // 最后, 再将数组以 ',' 将它们拼成一串字符串, 供网页识别渲染...
    }
    const res = getAssociatedCityList(list)
    console.log(res)
  </script>
</body>
</html>